<!-- 需求列表  -->
<template>
  <pageHeader title="计划工单" :breadCrumb="['生产管理', '计划工单']" />
  <div class="search-box">
    <!-- 左侧 -->
    <a-space>
      <div style="display: flex">
        <a-select v-model="searchType" :style="{ width: '150px' }">
          <a-option value="workCode">计划工单编码</a-option>
          <a-option value="productId"> 物料编码</a-option>
          <a-option value="productId"> 物料名称</a-option>
          <!-- <a-option> 客户名称</a-option> -->
        </a-select>
        <!-- 输入框 或 选择框 -->
        <ProductChoice v-if="searchType === 'productId'" v-model:value="searchForm.productId" @choice="Search" />
        <a-input v-if="searchType === 'workCode'" v-model="searchForm.workCode" @press-enter="Search"></a-input>
      </div>
      <!-- 重置 -->
      <a-button type="outline" @click="resetting">
        <template #icon> <icon-refresh /> </template>重置
      </a-button>
    </a-space>
    <!-- 表头设置组件 -->
    <a-space>
      <HeaderSettingCopy v-model:headerValues="headerValues" :define-headers="WorkOrderHerders.herders" :type="WorkOrderHerders.type" />
    </a-space>
  </div>
  <!-- 表格 -->
  <tableTurn style="padding: 0 10px" :tableData="getDemandAll" ref="tableRef">
    <a-table-column :width="70" align="center" title="序号">
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column v-for="header in headerValues" :key="header.name" :width="header.width || 200" :title="header.name" :fixed="header.fixed" :data-index="header.code" align="center" :ellipsis="true" :tooltip="{
        position: 'top',
      }">
      <template #cell="{ record }" v-if="!header.code">
        <template v-if="header.name === '紧急等级'">
          <a-typography-text type="primary" v-if="record.emergencyLevel === 1">
            一般
          </a-typography-text>
          <a-typography-text bold v-if="record.emergencyLevel === 2">
            紧急
          </a-typography-text>
          <a-typography-text type="warning" v-if="record.emergencyLevel === 3">
            加急
          </a-typography-text>
          <a-typography-text type="danger" v-if="record.emergencyLevel === 4">
            特急
          </a-typography-text>
        </template>
        <template v-if="header.name === '物料属性'">
          {{
            record.materialAttribute === 1
              ? '自制'
              : record.materialAttribute === 2
              ? '委外'
              : record.materialAttribute === 3
              ? '虚拟'
              : '采购'
          }}
        </template>
        <template v-if="header.name === '开始时间'">
          {{
            record.startDate && Dayjs(record.startDate).format('YYYY年MM月DD日')
          }}
        </template>

        <template v-if="header.name === '结束时间'">
          {{ record.endDate && Dayjs(record.endDate).format('YYYY年MM月DD日') }}
        </template>

        <template v-if="header.name === '工艺路线'">
          {{ record.processRouteName || '---未配置工艺路线---' }}
        </template>
      </template>
    </a-table-column>
    <a-table-column :width="150" fixed="right" title="操作" align="center">
      <template #cell="{ record }">
        <a-space>
          <!-- <a-link @click="toAddPlan(record)"> 创建生产计划 </a-link>
          <a-popconfirm
            content="是否删除该数据?"
            type="error"
            @ok="del(record.id)"
          >
            <a-link status="danger"> 删除 </a-link>
          </a-popconfirm> -->
          <a-tooltip content="创建生产计划">
            <IconFont type="icon-add-def" :size="26" :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }" @click="toAddPlan(record)" />
          </a-tooltip>
          <a-tooltip content="删除">
            <a-popconfirm content="确认删除？" type="error" @ok="del(record.id)">
              <IconFont type="icon-delete" :size="26" :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }" />
            </a-popconfirm>
          </a-tooltip>
        </a-space>
      </template>
    </a-table-column>
  </tableTurn>
  <!-- <Calendar>
      <template #day><a-input-number :min="1" /></template>
    </Calendar> -->
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import { GetWorkOrderPage } from '@/api/produce-management/OrderPlanning';

import Dayjs from 'dayjs';
import { WorkOrderHerders } from '@/utils/tableHerders';
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';

// 路由
const router = useRouter();
// 搜索条件
let searchForm = reactive<any>({});
const tableRef = ref();
// 计划工单编码类型
const searchType = ref('workCode');

let refModal = ref();
// 创建生产订单
const toAddPlan = (data: any) => {
  localStorage.setItem('OrderDataForm', JSON.stringify(data));
  router.push({
    name: 'PlanProductionDetails',
  });
};
// 表单数据
const getDemandAll = async (page: any) => {
  try {
    let res = await GetWorkOrderPage({
      ...page,
      ...searchForm,
    });
    return Promise.resolve(res);
  } catch (err: unknown) {
    return Promise.reject();
  }
};
// 搜索条件发生变化时
watch(
  () => searchType.value,
  () => {
    for (const key in searchForm) {
      delete searchForm[key];
    }
  }
);
// 搜索事件
const Search = () => {
  tableRef.value.loadData();
};
// 重置按钮
const resetting = () => {
  for (const key in searchForm) {
    delete searchForm[key];
  }
  tableRef.value.loadData();
};
// 删除事件
const del = async (id: number) => {
  // await DelStation({ id });
  tableRef.value.loadData();
};

let headerValues = ref<any[]>([]);
</script>

<style scoped lang="less">
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  margin-top: -7px;
}
</style>
